<template>
  <div class="chapter-box">
    <!-- 顶部简介 -->
    <div class="info-box">
      <div class="banner-bg" :style="'background-image:url('+ booksDetail.image +')'"></div>
      <div class="banner-wrap"></div>
      <div class="banner-item">
        <div class="right-box">
          <div class="name">{{booksDetail.name}}</div>
          <div class="writer">{{booksDetail.writer}} 著</div>
          <div class="tag">
            <span
              style="cursor: pointer;"
              @click="handleToRead('last')"
            >最新 ：{{booksDetail.new_chapter}}</span>
            <span>{{booksDetail.updated_at}}</span>
          </div>
          <div class="intro-text">简介：</div>
          <div class="intro">{{booksDetail.intro}}</div>
          <div class="button">
            <div class="open">
              <el-button v-if="recently_chapter_id===0" round @click="handleToRead('first')">翻开看看</el-button>
              <el-button v-else round @click="handleToRead('recently')">继续阅读</el-button>
            </div>
            <div class="collection">
              <el-button
                :icon="isAdd?'el-icon-star-on':'el-icon-star-off'"
                circle
                @click="handleToAddBookShelf"
              ></el-button>
            </div>
          </div>
        </div>
        <div class="left-box">
          <!-- <img :src="booksDetail.image" style="height:254px;width:190px;border-radius:12px;" /> -->
          <el-image
            style="height:254px;width:190px;border-radius:12px;"
            :src="booksDetail.image"
            fit="fill"
            lazy
          >
            <div slot="error">
              <img
                src="http://foglake.sanye666.top/images/default-covor.jpg"
                alt
                style="height:254px;width:190px;border-radius:12px;"
              />
            </div>
          </el-image>
          <div class="other">
            <span class="type">{{booksDetail.is_over}}</span>
            <span class="type">{{booksDetail.type}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 章节列表 -->
    <div class="list-box">
      <span>章节目录</span>
      <chaptercard :dataList="bookList" title="正文" info="第一章" @loadMore="loadMore" />
    </div>
  </div>
</template>

<script>
import { getChapterDetail, getChapterList } from "@/api/chapter";
import { bookShelfList, addBookShelf, delBookShelf } from "@/api/shelf";
import chaptercard from "@/components/ChapterCard";
export default {
  name: "chapter",
  components: {
    chaptercard,
  },
  data() {
    return {
      booksDetail: {},
      bookList: [],
      recently_chapter_id: 0,
      page: 1,
      pageSize: 50,
      isAdd: false,
      book_shelf_id: 0,
    };
  },
  created() {
    this.init();
  },
  mounted() {
    setTimeout(() => {
      this.recentlyRead();
    }, 1200);
  },
  methods: {
    async init() {
      await this.getDetail();
      await this.getBookShelfList();
    },
    getDetail() {
      return new Promise((resolve, reject) => {
        getChapterDetail({ id: this.$route.query.id }).then((res) => {
          if (res.code == 200) {
            this.booksDetail = res.data;
            resolve(res.msg);
          } else {
            reject(res.msg);
          }
        });
      });
    },
    getchapterList() {
      getChapterList({
        id: this.$route.query.id,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.bookList = this.bookList.concat(res.data.data);
        this.page = this.page + 1;
      });
    },
    handleToRead(chapterType) {
      let chapter_id =
        chapterType === "first"
          ? this.booksDetail.first_chapter_id
          : chapterType === "last"
          ? this.booksDetail.last_chapter_id
          : this.recently_chapter_id;
      this.$router.push({
        path: "/read",
        query: { id: this.booksDetail.id, chapter_id },
      });
    },
    recentlyRead() {
      if (window.localStorage.getItem("recently_read")) {
        let recently_read = JSON.parse(
          window.localStorage.getItem("recently_read")
        );
        if (
          recently_read.filter((item) => item.id == this.$route.query.id)
            .length > 0
        ) {
          let current = recently_read.filter(
            (item) => item.id == this.$route.query.id
          );
          this.recently_chapter_id = current["0"].chapterId;
        }
      }
    },
    // 无限滚动 加载章节列表
    loadMore() {
      this.getchapterList();
    },
    // 获取书架
    getBookShelfList() {
      return new Promise((resolve, reject) => {
        const headers = {
          Authorization: `Bearer ${this.$store.state.user.token}`,
        };
        if (this.$store.state.user.loginStatus) {
          bookShelfList(headers).then((res) => {
            if (res.code == 200) {
              res.data.bookList.forEach((item) => {
                if (item.book_id == this.booksDetail.id) {
                  this.isAdd = true;
                  this.book_shelf_id = item.book_shelf_id;
                }
              });
              resolve(res.msg);
            } else {
              reject(res.msg);
            }
          });
        }
      });
    },
    // 添加书架
    async handleToAddBookShelf() {
      if (this.$store.state.user.loginStatus) {
        const headers = {
          Authorization: `Bearer ${this.$store.state.user.token}`,
        };
        if (!this.isAdd) {
          const data = {
            bookId: this.booksDetail.id,
          };
          addBookShelf(data, headers).then((res) => {
            if (res.code == 200) {
              this.isAdd = true;
              this.$message({
                type: "success",
                message: "加入书架成功",
              });
            }
          });
        } else {
          if (this.book_shelf_id == 0) {
            await this.getBookShelfList();
          }
          delBookShelf({ bookShelfId: this.book_shelf_id }, headers).then(
            (res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "移除书架成功",
                });
              } else {
                this.$message.error(res.msg);
              }
            }
          );
        }
        this.isAdd = !this.isAdd;
      } else {
        this.$message.error("您还未登陆");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chapter-box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 120px;
  .info-box {
    width: 1200px;
    height: 460px;
    .banner-bg {
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
      background-size: 1200px 548px;
      filter: blur(20px);
      position: relative;
      top: 56px;
      transform: scale(0.95);
    }
    .banner-wrap {
      height: 100%;
      width: 100%;
      border-radius: 12px;
      position: relative;
      bottom: 404px;
      left: 0;
      background: #00266b;
      opacity: 0.3;
    }
    .banner-item {
      height: 100%;
      width: 100%;
      position: relative;
      bottom: 864px;
      left: 0;
      padding: 46px 40px 36px 46px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .right-box {
        width: 790px;
        text-align: left;
        position: relative;
        .name {
          font-size: 36px;
          line-height: 36px;
          font-family: MicrosoftYaHei-Bold;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
          margin-bottom: 14px;
        }
        .writer {
          font-size: 14px;
          line-height: 14px;
          font-family: MicrosoftYaHeiSemibold;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          opacity: 0.85;
          margin-bottom: 28px;
        }
        .tag {
          border-top: 1px solid rgba(255, 255, 255, 0.3);
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          span {
            color: #ffffff;
            margin: 14px 0;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 600;
          }
        }
        .intro-text {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 24px;
        }
        .intro {
          width: 512px;
          height: 50px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 26px;
          opacity: 0.8;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 24px;
        }
        .button {
          margin-top: 104px;
          .open {
            display: inline-block;
            margin-right: 6px;
          }
          .collection {
            display: inline-block;
          }
        }
      }
      .left-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .other {
          color: #ffffff;
          .num {
            font-size: 14px;
            padding: 0 18px;
            border-right: 1px solid #ffffff;
            border-left: 1px solid #ffffff;
          }
          .type {
            display: inline-block;
            font-size: 12px;
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, 1);
            border-radius: 20px;
            margin-right: 18px;
          }
        }
      }
    }
  }
  .list-box {
    padding-top: 124px;
    span {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: rgba(6, 27, 65, 1);
      line-height: 24px;
      opacity: 0.65;
      display: block;
      padding: 30px 0;
      border-top: 1px solid rgba(6, 27, 65, 0.08);
      border-bottom: 1px solid rgba(6, 27, 65, 0.08);
      margin-bottom: 32px;
    }
  }
}
</style>